<template>
	<view class="page">
		<u-navbar
			placeholder
			bgColor="#F8F8F8"
		>
			<view class="navbar__left" slot="left" @click="back">
				<text>取消</text>
			</view>
			<view class="navbar__right" slot="right" @click="submit">
				<text>确定</text>
			</view>
		</u-navbar>
		
		<view class="">
			<view class="list">
				<view class="list__left">板块选择：</view>
				<view class="list__right">
					<view class="category" :class="selectCategory == item ? 'category-active' : ''" v-for="item in category" :key="item" @click="changeCategory(item)">{{item}}</view>
				</view>
			</view>
			<view class="" style="padding: 20rpx;box-sizing: border-box;min-height: 150rpx;">
				<view class="" style="float: left;height: 60rpx;line-height: 60rpx;width: 130rpx;font-size: 25rpx;font-weight: bold;">话题选择：</view>
				<view class="tags tags-active" style="display: inline-block;height: 55rpx;" v-for="(item,index) in selectTags" :key="item" @click="delTag(index)">
					<view class="" style="margin-right: 10rpx;float: left;">{{item}}</view>
					<view class="" style="float: left;margin-top: 12rpx;">
						<u-icon name="close-circle-fill" color="#aaa" size="15"></u-icon>
					</view>
				</view>
				<view class="" style="display: inline-block;color: #aaa;font-size: 25rpx;margin-top: 11rpx;" v-show="!selectTags.length">选择内容相关话题（可选）</view>
				<view class="" style="clear: both;"></view>
			</view>
			
			<view class="list1">
				<view class="list1__top">推荐话题</view>
				<view class="list1__bottom">
					<view class="tags list1__bottom--item" v-for="item in tags" :key="item" @click="changeTags(item)">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import {sendBackFunction} from '@/common/custom_util.js'
	
	export default {
		data() {
			return {
				category: ['日常','专题','分享','反馈'],
				selectTags: [],
				tags: [],
				selectCategory: '日常',
			}
		},
		onLoad(options) {
			this.selectCategory = options.category ? options.category : this.selectCategory;
			this.selectTags = options.tags ? JSON.parse(options.tags) : this.selectTags;
			this.getSubjectTagListByBlock();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			submit() {
				sendBackFunction('setCategoryAndTags',{
					category: this.selectCategory,
					tags: this.selectTags
				})
			},
			/**
			 * 根据类型名称查询标签列表
			 * @param {Object} v
			 */
			getSubjectTagListByBlock() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectTagListByBlock',
					apiparam: {
						blockname: this.selectCategory,
					},
					success(res) {
						if(res.length) {
							let temp = [];
							res.forEach(item => {
								temp.push(item.TagName)
							})
							that.tags = temp;
						} else {
							that.tags = [];
						}
					},
					fail() {
						that.tags = [];
					}
				})
			},
			/**
			 * 切换分类
			 * @param {Object} v
			 */
			changeCategory(v) {
				this.selectTags = [];
				this.selectCategory = v;
				this.getSubjectTagListByBlock();
			},
			/**
			 * 切换标签
			 * @param {Object} v
			 */
			changeTags(v) {
				let flag = false;
				this.selectTags.forEach(item => {
					if(item == v) flag = true;
				})
				if(!flag) this.selectTags.push(v)
			},
			/**
			 * 删除标签
			 * @param {Object} i
			 */
			delTag(i) {
				this.selectTags.splice(i,1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		height: 100vh;
	}
	
	.navbar__left {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.navbar__right {
		font-size: 25rpx;
		color: #69c0ff;
	}
	
	.list {
		display: flex;
		align-items: center;
		height: 80rpx;
		
		&__left {
			padding: 0 20rpx;
			font-size: 25rpx;
			font-weight: bold;
		}
		
		&__right {
			display: flex;
			align-items: center;
		}
	}
	
	.list1 {
		padding: 20rpx;
		box-sizing: border-box;
		
		&__top {
			font-size: 25rpx;
			font-weight: bold;
		}
		
		&__bottom {
			
			&--item {
				display: inline-block;
				margin-top: 20rpx;
				border-color: #aaa !important;
			}
		}
	}
	
	.category {
		padding: 5rpx 10rpx;
		background-color: #eee;
		margin-right: 30rpx;
		border-radius: 10rpx;
		color: #aaa;
	}
	
	.category-active {
		background-color: #bae7ff;
		color: #249AF2;
	}
	
	.tags-active {
		background-color: #eee !important;
	}
	
	.tags {
		background-color: #fff;
		border: 1rpx solid #eee;
		padding: 0 10rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		color: #aaa;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>
